<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Javascript URL Decode jQuery Plugin</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Language" content="en" />
	<meta name="description" content="URL Decode jQuery Plugin. Allows to parse, decode, encode URL using Javascript." />
	<meta name="keywords" content="" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="shortcut icon" href="favicon.png" />

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.urldecoder.min.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
<script src="js/ui.js"></script>
</head>
<body id="inner">
<div class="top-wrapper">
	<div class="top-grey-block">
		<div class="header">
			<a href="."><h1>URL Decoder</h1></a>
			<div class="adsense">		
				<script type="text/javascript"><!--
				google_ad_client = "ca-pub-6770565582849581";
				/* urldecoderonline.com-468x60 */
				google_ad_slot = "4883552878";
				google_ad_width = 468;
				google_ad_height = 60;
				//-->
				</script>
				<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
			</div>
		</div>
		<div class="decode-block">
			<div class="decode-inner">
				<form  method="post" action="." name="sform" id="decode-form">
					<span class="h1">URL</span>
					<input type="text" id="decode-field"/>
					<input type="submit" id="decode-submit" value=""/>
					<div id="example">Example: <a href="#" id="example-link">http://user:pass@www.example.com:8080/path/to/file.htm?arg1=value1+%40%23456&amp;arg2=Touch%C3%A9#anchorOnPage</a></div>
				</form>
			</div>
		</div>
		<div id="loader">
			<div id="loader-pic">
				Decoding...
			</div>
		</div>
		<div class="top-content">			
			<h2>Full URL Decoded</h2>
			<p id="decode-fullstring"></p>
			<div class="parsed" id="url-parsed"></div>
			<div class="query" id="decode-query-parsed"></div>
		</div>
	</div>
</div>
<div class="central-wrapper">

	<div class="content-wrap">
		<div class="content">
			<p><style>
	td { vertical-align:top;}
</style>

<script type="text/javascript">
  	$(document).ready(function(){
		$('#button-decode').click(function(){
			$('#output-decode').val($.url.decode($('#input-decode').val()));
		});
		
		$('#button-encode').click(function(){
			$('#output-encode').val($.url.encode($('#input-encode').val()));
		});
		
		$('#button-parse').click(function(){
			$('#output-parse').val(
				array2json($.url.parse($('#input-parse').val()))
			);
		});
		
		$('#button-build').click(function(){
			$('#output-build').val(
				$.url.build(
					eval(
						"(" + 
						$('#input-build').val().replace(/\t/g,'') +
						")"
					)
				)
			);
		});
		
	})

	/**
	 * Converts the given data structure to a JSON string.
	 * Argument: arr - The data structure that must be converted to JSON
	 * Example: var json_string = array2json(['e', {pluribus: 'unum'}]);
	 * 			var json = array2json({"success":"Sweet","failure":false,"empty_array":[],"numbers":[1,2,3],"info":{"name":"Binny","site":"http:\/\/www.openjs.com\/"}});
	 * http://www.openjs.com/scripts/data/json_encode.php
	 * MODIFIED FOR PRESENTATIONAL PURPOSES
	 */
	function array2json(arr,lvl) {
		var parts = [];
		var lvl = lvl+1 || 1;
	   // var is_list = (Object.prototype.toString.apply(arr) === '[object Array]');
		var is_list = arr instanceof Array;
		for(var key in arr) {
			var value = arr[key];
			if(typeof value == "object") { //Custom handling for arrays
				if(is_list) parts.push(array2json(value,lvl)); /* :RECURSION: */
			   // else parts[key] = array2json(value); /* :RECURSION: */
			   else parts.push('\t"' + key + '":' + array2json(value,lvl))
				//console.log(key,parts[key])
			} else {
				var str = "";
				if(!is_list) str = '"' + key + '":';

				//Custom handling for multiple data types
				if(typeof value == "number") str += value; //Numbers
				else if(value === false) str += 'false'; //The booleans
				else if(value === true) str += 'true';
				else str += '"' + value + '"'; //All other things
				// :TODO: Is there any more datatype we should be in the lookout for? (Functions?)
				var tab = '';
				for(var i=0; i<lvl; i++){
					tab += '\t';
				}
				parts.push(tab+str);
			}
		}
		var json = parts.join(",\n");
		var tabBrace = '';
		for(var i=1; i<lvl; i++){
			tabBrace += '\t';
		}
		
		if(is_list) return '[\n' + json + '\n'+tabBrace+']';//Return numerical JSON
		return '{\n' + json + '\n'+tabBrace+'}';//Return associative JSON
	}	
</script>

<h3>jQuery URL Decoder Plugin</h3>

<p>Parses URL and return its components. Can also build URL from components.</p>
<p><em>Current version: 1.0<br />License: <a href="license.txt">MIT License</a></em></p>

<h2>Download</h2>
<ul>
	<li><a href="js/jquery.urldecoder.min.js">Minified</a> (5KB)</li>
	<li><a href="js/jquery.urldecoder.js">Uncompressed</a> (11KB)</li>
</ul>

<h2>How to use</h2>
<pre>
$.url.<b>decode</b>('http://username:password@hostname/path?arg1=value%40+1&amp;arg2=touch%C3%A9#anchor')
// returns
// http://username:password@hostname/path?arg1=value@ 1&amp;arg2=touché#anchor
// Note: "%40" is replaced with "@", "+" is replaced with " " and "%C3%A9" is replaced with "é"

$.url.<b>encode</b>('file.htm?arg1=value1 @#456&amp;arg2=value2 touché')
// returns
// file.htm%3Farg1%3Dvalue1%20%40%23456%26arg2%3Dvalue2%20touch%C3%A9
// Note: "@" is replaced with "%40" and "é" is replaced with "%C3%A9"

$.url.<b>parse</b>('http://username:password@hostname/path?arg1=value%40+1&amp;arg2=touch%C3%A9#anchor')
// returns
{
	source: 'http://username:password@hostname/path?arg1=value%40+1&amp;arg2=touch%C3%A9#anchor',
	protocol: 'http',
	authority: 'username:password@hostname',
	userInfo: 'username:password',
	user: 'username',
	password: 'password',
	host: 'hostname',
	port: '',
	path: '/path',
	directory: '/path',
	file: '',
	relative: '/path?arg1=value%40+1&amp;arg2=touch%C3%A9#anchor',
	query: 'arg1=value%40+1&amp;arg2=touch%C3%A9',
	anchor: 'anchor',
	params: {
		'arg1': 'value@ 1',
		'arg2': 'touché'
	}
}

$.url.<b>build</b>({
	protocol: 'http',
	username: 'username',
	password: 'password',
	host: 'hostname',
	path: '/path',
	query: 'arg1=value%40+1&amp;arg2=touch%C3%A9',
	// or 
	//params: {
	//	'arg1': 'value@ 1',
	//	'arg2': 'touché'
	//}
	anchor: 'anchor',
})
// returns
// http://username:password@hostname/path?arg1=value%40+1&amp;arg2=touch%C3%A9#anchor
 </pre>

<h2>Demo</h2>
<h4>$.url.decode</h4>
<table border="0" cellspacing="0" cellpadding="5">
	<tr>
		<td><textarea id="input-decode" cols="50" rows="3">http://anonymous:guest@site.com@www.example.com:8080/path/to/file.htm?arg1=value1+%40%23456&amp;arg2=value2+touch%C3%A9#anchorOnPage</textarea></td>
		<td width="90" align="center"><input id="button-decode" type="button" value="decode" /></td>
		<td><textarea id="output-decode" cols="50" rows="3" autocomplete="off"></textarea></td>
	</tr>
</table>


<h4>$.url.encode</h4>
<table border="0" cellspacing="0" cellpadding="5">
	<tr>
		<td><textarea id="input-encode" cols="50" rows="3">file.htm?arg1=value1 @#456&amp;arg2=value2 touché</textarea></td>
		<td width="90" align="center"><input id="button-encode" type="button" value="encode" /></td>
		<td><textarea id="output-encode" cols="50" rows="3" autocomplete="off"></textarea></td>
	</tr>
</table>

<h4>$.url.parse</h4>
<table border="0" cellspacing="0" cellpadding="5">
	<tr>
		<td><textarea id="input-parse" cols="50" rows="3">http://anonymous:guest@site.com@www.example.com:8080/path/to/file.htm?arg1=value1+%40%23456&amp;arg2=value2+touch%C3%A9#anchorOnPage
		</textarea></td>
		<td width="90" align="center"><input id="button-parse" type="button" value="parse" /></td>
		<td><textarea id="output-parse" cols="50" rows="12" autocomplete="off"></textarea><br />
			<small>(this output of $.url.parse is JSON-encoded and tab-formatted here)</small>
		</td>
	</tr>
</table>

<h4>$.url.build</h4>
<table border="0" cellspacing="0" cellpadding="5">
	<tr>
		<td>
<textarea id="input-build" cols="50" rows="12">{
	"protocol":"http",
	"user":"anonymous",
	"password":"guest@site.com",
	"host":"www.example.com",
	"port":"8080",
	"path":"/path/to/file.htm",
	"params":{
		"arg1":"value1 @#456",
		"arg2":"value2 touché"
	},
	"anchor":"anchorOnPage"
}</textarea><br />
			<small>(this input for $.url.build will evaluate as javascript object)</small>
		</td>
		<td width="90" align="center"><input id="button-build" type="button" value="build" /></td>
		<td><textarea id="output-build" cols="50" rows="3" autocomplete="off"></textarea></td>
	</tr>
</table></p>
		</div>
	</div>
	
</div>
<div class="mailto-pink-block">
	<div class="mail-wrapper">
		<div class="info-mail">
			<h3>Need more?</h3>
			<p>Would you like to place code to your site, see examples in PHP or Javascript and have more technical details or something else?</p>
			<p>Tell us and may be it will be implemented in the next version of “URL Decoder”.</p>
		</div>
		<img src="img/envelope.gif" align="left"/>
		<form  method="post" action="thanks-feedback.htm" name="sform" class="si-block" id="idea-form">
			<input type="hidden" name="name" value="-" />
			<input type="hidden" name="email" value="-" />
			<input type="hidden" name="subject" value="Idea" />
			
			<textarea name="content"></textarea><br />
			<input type="hidden" name="ajax" value="1" />
			<input id="send-button" type="submit" value=""/>
		</form>
	</div>
</div>
<div class="footer">
	<p>&copy; 2010 UrlDecoderOnline.com</p>
</div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-12941477-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>